<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-活动管理</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.all.js"></script>
    <script src="/static/vue/components/ueditorTemplate.js"></script>

</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 300px;
        display: block;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <el-form ref="form" :model="form" label-width="180px" >
        <el-form-item label="活动编号：" v-if="form.id">
            <el-input v-model="form.id" style="width:400px;" readonly size="small"></el-input>
        </el-form-item>
        <el-form-item label="活动名称：" prop="activityName" required>
            <el-input v-model="form.activityName" style="width:400px;" placeholder="请输入活动名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="活动类型：" prop="type" required>
            <el-select v-model="form.type" placeholder="请选择活动类型" size="small" filterable style="width:400px;" clearable >
                <el-option
                        v-for="item in activityTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动品牌：" prop="activityBrand" required>
            <el-select v-model="form.activityBrand" placeholder="请选择活动品牌" size="small" filterable style="width:400px;" clearable >
                <el-option
                        v-for="item in activityBrandOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动对象：" prop="activityTargetObject" required>
            <el-select v-model="form.activityTargetObject" placeholder="请选择活动对象" size="small" filterable style="width:400px;" clearable >
                <el-option
                        v-for="item in activityTargetObjectOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动地点：" prop="activityLocation" required>
            <el-select v-model="form.activityLocation" placeholder="请选择活动地点" size="small" filterable style="width:400px;" clearable >
                <el-option
                        v-for="item in activityLocationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="海报："  prop="picUrl">
            <el-upload
                    class="avatar-uploader"
                    action="/activity/saveActivityPoster"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
            >
                <img  :src="'/book/getLocalSystemPic?filePath='+ form.posterUrl" class="avatar" v-if="form.posterUrl" >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="活动时间："required>
            <el-date-picker
                    v-model="activityDateSelectValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="活动开始时间"
                    end-placeholder="活动结束时间" size="small" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="报名时间：">
            <el-date-picker
                    v-model="applyDateSelectValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="报名开始时间"
                    end-placeholder="报名结束时间" size="small" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="签到时间：" required>
            <el-date-picker
                    v-model="signDateSelectValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="签到开始时间"
                    end-placeholder="签到结束时间" size="small" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话：" prop="contactPhone" required>
            <el-input v-model="form.contactPhone" style="width:400px;" placeholder="请输入联系电话" size="small"></el-input>
        </el-form-item>
        <el-form-item label="主讲人：" prop="speaker" required>
            <el-input v-model="form.speaker" style="width:400px;" placeholder="请输入主讲人" size="small"></el-input>
        </el-form-item>
        <el-form-item label="年龄范围（单位：岁）：">
            <el-input v-model="form.ageMin" style="width:190px;" placeholder="请输入年龄（最小）" size="small"></el-input>
            <span class="ml-1">~</span>
            <el-input v-model="form.ageMax" style="width:190px;" placeholder="请输入年龄（最大）" size="small"></el-input>
        </el-form-item>
        <el-form-item label="活动总名额：" prop="peopleNum" required>
            <el-input v-model="form.peopleNum" style="width:400px;" placeholder="请输入活动总名额" size="small"></el-input>
        </el-form-item>
        <el-form-item label="活动简介/概述：" prop="introduction" required>
            <el-input v-model="form.introduction" type="textarea" style="width:800px;" placeholder="请输入活动简介/概述" :rows="10"></el-input>
        </el-form-item>
        <el-form-item label="活动详情：" required>
            <div style="width:1200px;">
                <ueditor-template ueditor-id="activityContentEditor" ref="activityContentEditorRef">
                </ueditor-template>
            </div>
        </el-form-item>

        <el-form-item>
            <div style="margin-top:200px;margin-bottom: 200px;" id="saveWrap">
                <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
                <el-button size="small">取消</el-button>
            </div>
        </el-form-item>
    </el-form>


</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                activityContentEditor:"",
                activityTypeOptions:[],
                activityBrandOptions:[],
                activityLocationOptions:[],
                activityTargetObjectOptions:[],
                activityDateSelectValue: '',
                signDateSelectValue: '',
                applyDateSelectValue: '',
                form:{
                      id:"",
                      activityName:"",
                      type:"",
                      activityBrand:"",
                      activityTargetObject:"",
                      activityLocation:"",
                      activityStartTime:"",
                      activityEndTime:"",
                      addTime:"",
                      addUser:"",
                      updateTime:"",
                      updateUser:"",
                      deleteTime:"",
                      deleteUser:"",
                      peopleNum:"",
                      state:"",
                      signStartTime:"",
                      signEndTime:"",
                      contactPhone:"",
                      content:"",
                      introduction:"",
                      speaker:"",
                      applyStartTime:"",
                      applyEndTime:"",
                      ageMin:"",
                      ageMax:"",
                      posterUrl:"",
                }


            }
        },
        mounted() {

            let that = this;
            this.$nextTick(function () {
                that.setAllSelectOptions();
                let id = getQueryString("id")
                let isOnlySee = getQueryString("isOnlySee")
                if(id){
                    that.form.id = id;
                    that.getActivityByIdMethod(id);
                    //获取信息
                }
                if(isOnlySee == "1"){
                    $("#saveWrap").css("display","none");
                }

            });

        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.form.posterUrl = file.response;
            },
            setAllSelectOptions(){
                let that = this;
                getDicTSysdicMethodEL("activity_type","activityTypeOptions",that);
                getDicTSysdicMethodEL("activity_brand","activityBrandOptions",that);
                getDicTSysdicMethodEL("activity_target_object","activityTargetObjectOptions",that);
                getDicTSysdicMethodEL("activity_location","activityLocationOptions",that);
            },
            //提交
            onSubmit(){
                let that = this;
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        //活动时间必须要有
                        if(!that.activityDateSelectValue){
                            that.$message.error("请填写活动时间");
                            return;
                        }
                        //签到时间必须要有
                        if(!that.signDateSelectValue){
                            that.$message.error("请填写签到时间");
                            return;
                        }

                        let deepCopyForm = JSON.parse(JSON.stringify(that.form));
                        if(that.activityDateSelectValue){
                            deepCopyForm.activityStartTime = that.activityDateSelectValue[0];
                            deepCopyForm.activityEndTime = that.activityDateSelectValue[1];
                        }
                        if(that.signDateSelectValue){
                            deepCopyForm.signStartTime = that.signDateSelectValue[0];
                            deepCopyForm.signEndTime = that.signDateSelectValue[1];
                        }
                        // if( !(deepCopyForm.activityStartTime <= deepCopyForm.signStartTime &&
                        //     deepCopyForm.signEndTime <= deepCopyForm.activityEndTime ) ){
                        //     that.$message.error("活动开始时间和签到时间不符合逻辑");
                        //     return;
                        // }
                        //如果有值
                        if(that.applyDateSelectValue){
                            deepCopyForm.applyStartTime = that.applyDateSelectValue[0];
                            deepCopyForm.applyEndTime = that.applyDateSelectValue[1];
                            //报名时间  大于 签到时间
                            if( !(deepCopyForm.applyEndTime <= deepCopyForm.signStartTime ) ){
                                that.$message.error("签到时间和报名时间不符合逻辑");
                                return;
                            }
                        }
                        if(that.form.ageMin || that.form.ageMax){
                            if (!/^([1-9][0-9]*)$/.test(that.form.ageMin)) {
                                that.$message.error("年龄必须是正整数");
                                return;
                            }
                            if (!/^([1-9][0-9]*)$/.test(that.form.ageMax)) {
                                that.$message.error("年龄必须是正整数");
                                return;
                            }
                            if(Number(that.form.ageMin) >= Number(that.form.ageMax) ){
                                that.$message.error("最大最小年龄填写不合法");
                                return;
                            }
                            if(Number(that.form.ageMin) > 125 || Number(that.form.ageMax) >125){
                                that.$message.error("年龄最大不超狗125");
                                return;
                            }
                        }

                        deepCopyForm.content = removeFullTextUseLess(that.$refs.activityContentEditorRef.getContent());
                        if(!deepCopyForm.content){
                            that.$message.error("请填写活动详情");
                            return;
                        }

                        let url = "";
                        if (!deepCopyForm.id) {
                            url = "activity/addActivity";
                        } else {
                            url = "activity/updateActivity";
                        }
                        requestApiTB(url, deepCopyForm, 'POST', function (res) {
                            if (res.code === 0) {
                                that.$message.success("执行成功");
                                if (!that.form.id) {
                                    that.$refs['form'].resetFields();//重置字段
                                }
                                setTimeout(function(){
                                    window.location.href = "./addOrEditActivity.html?id=" + res.data;
                                }, 1000);
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    } else {
                        that.$message.error("表单校验不通过");
                        return false;
                    }
                });
            },

            getActivityByIdMethod(){
                let that = this;
                requestApiTB("activity/getActivityById", {"id": that.form.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        if(res.data){
                            res.data.type = res.data.type + "";
                            res.data.activityBrand = res.data.activityBrand + "";
                            res.data.activityTargetObject = res.data.activityTargetObject + "";
                            res.data.activityLocation = res.data.activityLocation + "";
                            if(res.data.activityStartTime){
                                that.activityDateSelectValue = [
                                    res.data.activityStartTime,res.data.activityEndTime
                                ];
                            }
                            if(res.data.applyStartTime){
                                that.applyDateSelectValue = [
                                    res.data.applyStartTime,res.data.applyEndTime
                                ];
                            }
                            if(res.data.signStartTime){
                                that.signDateSelectValue = [
                                    res.data.signStartTime,res.data.signEndTime
                                ];
                            }
                            setTimeout(function(){
                                that.$refs.activityContentEditorRef.setContent(res.data.content);
                            }, 800);
                        }
                        that.form = res.data;

                    } else {
                        that.$message.error(res.msg);
                    }
                });
            },


        }
    })
</script>
</html>